<!-- UPDATED: -->

<div class="updated" *ngIf="step === 900">
  <h1>
    <svg x="0px" y="0px" width="128px" height="128px" viewBox="0 0 128 128" enable-background="new 0 0 128 128" xml:space="preserve">
      <g>
        <g>
          <rect x="24" y="80" fill="#0071BC" width="16" height="16"/>
          <rect x="40" y="64" fill="#0071BC" width="16" height="16"/>
          <rect x="56" y="48" fill="#0071BC" width="16" height="16"/>
          <rect x="72" y="64" fill="#0071BC" width="16" height="16"/>
          <rect x="88" y="80" fill="#0071BC" width="16" height="16"/>
        </g>
        <path fill="#4D4D4D" d="M123,20V0H88v20h-9V0H44v20h-9V10V0H25H10H0v10v10v10v20v78h128V20H123z M118,118H10V10h15v20h19h35h9h30
          V118z"/>
      </g>
    </svg>
    <div>{{'splash.updatedTo' | translate}} v3.0.0!</div>
  </h1>
  <div class="splash-options">
    <h3>{{'splash.v3.title' | translate}}</h3>
    <p>{{'splash.v3.p1' | translate}}</p>
    <h3>{{'splash.v3.important' | translate}}</h3>
    <p>{{'splash.v3.p2' | translate}}</p>
    <form novalidate>
      <fieldset class="mt-2">
        <div class="grid cols-6">
          <div class="field span-4" style="grid-template: 25px 50px / 1fr;">
            <label title="{{'splash.v3.recovered' | translate}}">{{'splash.v3.recovered' | translate}}</label>
            <textarea name="recoveredLinks" id="recoveredLinks" readonly="readonly">{{printRecoveredQuickLinks}}</textarea>
          </div>
          <div class="field span-2">
            <div>
              <button id="recoverLinksBtn" type="button" class="btn mt1" (click)="recoverLinks()" [disabled]="importStatus != ''">{{'splash.v3.importLinks' | translate}}</button>
              <div class="mt1" style="color: green">{{importStatus}}</div>
            </div>
          </div>
        </div>
      </fieldset>
    </form>
    <p>{{'splash.v3.p3' | translate}}</p>
    <h3>{{'splash.new' | translate}}</h3>
    <ul>
      <li>{{'splash.v3.l1' | translate}}</li>
      <li>{{'splash.v3.l2' | translate}}</li>
      <li>{{'splash.v3.l3' | translate}}</li>
      <li>{{'splash.v3.l4' | translate}}</li>
      <li>{{'splash.v3.l5' | translate}}</li>
      <li>{{'splash.v3.l6' | translate}}</li>
      <li>{{'splash.v3.l7' | translate}}</li>
      <li>{{'splash.v3.l8' | translate}}</li>
    </ul>
  </div>
  <button type="button" class="btn btn--splash btn--start" (click)="step = 2">{{'splash.getStarted' | translate}}</button>
</div>

<!-- INSTALLED: -->

<div id="step1" *ngIf="step === 1">
  <h1>
    <svg x="0px" y="0px" width="128px" height="128px" viewBox="0 0 128 128" enable-background="new 0 0 128 128" xml:space="preserve">
      <g>
        <g>
          <rect x="24" y="80" fill="#0071BC" width="16" height="16"/>
          <rect x="40" y="64" fill="#0071BC" width="16" height="16"/>
          <rect x="56" y="48" fill="#0071BC" width="16" height="16"/>
          <rect x="72" y="64" fill="#0071BC" width="16" height="16"/>
          <rect x="88" y="80" fill="#0071BC" width="16" height="16"/>
        </g>
        <path fill="#4D4D4D" d="M123,20V0H88v20h-9V0H44v20h-9V10V0H25H10H0v10v10v10v20v78h128V20H123z M118,118H10V10h15v20h19h35h9h30
          V118z"/>
      </g>
    </svg>
    <div><strong>{{'splash.s1.welcome' | translate | translateCut:0 }}</strong> {{'splash.s1.welcome' | translate | translateCut:1 }} <em>{{'splash.s1.welcome' | translate | translateCut:2 }}</em> {{'splash.s1.welcome' | translate | translateCut:3 }}</div>
  </h1>
  <h2>{{'splash.s1.p1' | translate}}</h2>
  <button type="button" class="btn btn--splash btn--start" (click)="step = 2">{{'splash.getStarted' | translate}}</button>
</div>

<!-- STEP 2 -->
<div id="step2" class="splash-steps" *ngIf="step === 2">
  <div class="splash-options">
    <h3>{{'splash.s2.title' | translate}}</h3>
    <div class="splash_lang-btns">
      <button
        *ngFor="let lang of languages"
        type="button"
        class="btn btn--splash"
        (click)="chooseLang(lang.id); newLang = lang.id"
        [ngClass]="{'active': newLang === lang.id}">
        {{lang.label}}
      </button>
    </div>
  </div>
  <div class="splash-nav">
    <button type="button" class="btn btn--splash btn--next" (click)="step = 3" [disabled]="newLang == null">{{'splash.next' | translate}} &rarr;</button>
    <div class="splash-nav_misc">
      <button type="button" class="btn btn--splash btn--skip" (click)="skipIntro()">{{'splash.skip' | translate}}</button>&nbsp;
      <button type="button" class="btn btn--splash btn--back" (click)="shared.status === 'updated' ? step = 900 : step = 1">&larr; {{'splash.back' | translate}}</button>
    </div>
  </div>
</div>

<!-- STEP 3 -->
<div id="step3" class="splash-steps" *ngIf="step === 3">
  <div class="splash-options">
    <h3>{{'splash.s3.title' | translate}}</h3>
    <div style="display: flex; justify-content: space-between;">
      <button type="button" class="btn btn--splash" (click)="enableTime(false)">{{'splash.no' | translate}}</button>
      <button type="button" class="btn btn--splash" (click)="enableTime(true)">{{'splash.yes' | translate}}</button>
    </div>
  </div>
  <div class="splash-nav">
    <div class="splash-nav_misc">
      <button type="button" class="btn btn--splash btn--skip" (click)="skipIntro()">{{'splash.skip' | translate}}</button>&nbsp;
      <button type="button" class="btn btn--splash btn--back" (click)="step = 2">&larr; {{'splash.back' | translate}}</button>
    </div>
  </div>
</div>

<!-- STEP 4 -->
<div id="step4" class="splash-steps" *ngIf="step === 4">
  <div class="splash-options">
    <h3>{{'splash.s4.title' | translate}}</h3>
    <div style="display: flex; justify-content: space-between;">
      <button type="button" class="btn btn--splash" (click)="enableDate(false)">{{'splash.no' | translate}}</button>
      <button type="button" class="btn btn--splash" (click)="enableDate(true)">{{'splash.yes' | translate}}</button>
    </div>
  </div>
  <div class="splash-nav">
    <div class="splash-nav_misc">
      <button type="button" class="btn btn--splash btn--skip" (click)="skipIntro()">{{'splash.skip' | translate}}</button>&nbsp;
      <button type="button" class="btn btn--splash btn--back" (click)="step = 3">&larr; {{'splash.back' | translate}}</button>
    </div>
  </div>
</div>

<!-- STEP 5 -->
<div id="step5" class="splash-steps" *ngIf="step === 5">
  <div class="splash-options">
    <h3>{{'splash.s5.title' | translate}}</h3>
    <div style="display: flex; justify-content: space-between;">
      <button type="button" class="btn btn--splash" (click)="enableBookmarks(false)">{{'splash.no' | translate}}</button>
      <button type="button" class="btn btn--splash" (click)="enableBookmarks(true)">{{'splash.yes' | translate}}</button>
    </div>
  </div>
  <div class="splash-nav">
    <div class="splash-nav_misc">
      <button type="button" class="btn btn--splash btn--skip" (click)="skipIntro()">{{'splash.skip' | translate}}</button>&nbsp;
      <button type="button" class="btn btn--splash btn--back" (click)="step = 4">&larr; {{'splash.back' | translate}}</button>
    </div>
  </div>
</div>

<!-- STEP 6 -->
<div id="step6" class="splash-steps" *ngIf="step === 6">
  <div class="splash-options">
    <h3>{{'splash.s6.title' | translate}}</h3>
    <div class="grid cols-4 pt1">
      <button
        *ngFor="let color of colors;"
        class="colorsBtn btn btnBlock span-1"
        [ngClass]="{'active': settings.config.design.colorsId === color.id}"
        [style.backgroundColor]="color.bg"
        [style.color]="color.fg"
        (click)="setColors(color)">
        abc
      </button>
    </div>
  </div>
  <div class="splash-nav">
    <button type="button" class="btn btn--splash btn--next" (click)="step = 7" [disabled]="settings.config.design.colorsId === 0">{{'splash.next' | translate}} &rarr;</button>
    <div class="splash-nav_misc">
      <button type="button" class="btn btn--splash btn--skip" (click)="skipIntro()">{{'splash.skip' | translate}}</button>&nbsp;
      <button type="button" class="btn btn--splash btn--back" (click)="step = 5">&larr; {{'splash.back' | translate}}</button>
    </div>
  </div>
</div>

<!-- STEP 7 -->
<div id="step7" class="splash-steps" *ngIf="step === 7">
  <div class="splash-options">
    <h3>{{'splash.s7.title' | translate}}</h3>
    <p>{{'splash.s7.p1' | translate}}</p>
    <p>{{'splash.s7.p2' | translate}}</p>
  </div>
  <div class="splash-nav">
    <button type="button" class="btn btn--splash btn--next" (click)="finishIntro()">{{'splash.letsGo' | translate}}</button>
    <div class="splash-nav_misc">
      <button type="button" class="btn btn--splash btn--back" (click)="step = 6">&larr; {{'splash.back' | translate}}</button>
    </div>
  </div>
</div>

<!-- Options toggle / nav -->
<app-settings-toggle *ngIf="step === 7" class="splash-settings-toggle"></app-settings-toggle>
